<template>
    <div class="container">
        <div class="row mt-5 mb-5">
            <div class="col-lg-6">
                <button type="button" class="btn btn-outline-success col-12" @click="show">
                    展开
                </button>
            </div>
            <div class="col-lg-6">
                <button type="button" class="btn btn-outline-danger col-12" @click="miss">
                    收缩
                </button>
            </div>
        </div>
        <!-- 列表内容 -->
        <h4>B级车</h4>
        <TransitionGroup appear tag="ul" class="list list-group w-25 " name="list" :css="false"
            @enter="onEnter" @leave="onLeave">
            <template  v-if="showList">
                <li class="item list-group-item py-2" v-for="item in list" :key="item.id">{{ item.label }}
                </li>
            </template>
        </TransitionGroup>
    </div>
</template>

<script setup>
import { nanoid } from "nanoid";
import { ref } from "vue";
import { gsap } from "gsap";

const list = ref([{
    id: nanoid(6),
    label: '迈腾'
},
{
    id: nanoid(6),
    label: '奔驰C级'
},
{
    id: nanoid(6),
    label: '奥迪A4L'
},
])
const showList = ref(false)

const show = e => {
    showList.value = true
}
const miss = e => {
    showList.value = false
}

const onEnter = (el, done) => {
    gsap.fromTo(el,
        {
            yPercent: -100,
            opacity: 0,
            duration: 1,
            onComplete: done
        },
        {
            yPercent:0,
            opacity: 1,
            duration: 1
        })
}

const onLeave = (el, done) => {
    gsap.to(el, {
        yPercent:-100,
        opacity: 0.4,
        duration: 0.2,
        onComplete: done
    })
}
</script>

<style lang="scss" scoped></style>